<template>
  <div>
    <div class="div-container">
      <div class="img-container">
        <img src="../assets/other/lx1.png" alt="">
      </div>
      <div class="channel-registion" :style="{height:bgImgHeight}" v-show="isShow">
        <div class="channel-form">
          <div class="form-title">· 渠道注册 ·</div>
          <input type="tel" placeholder="手机号" v-model="registionInfo.tel">
          <input type="text" placeholder="姓名" v-model="registionInfo.name">
          <div class="form-btn" @click="agreeAndSubmit">
            <span>同意并注册</span>
          </div>
          <div class="xiewa-logo">
            <div class="logo-container" :style="{height:logoContainerImgHeight}" ref="logoContainer">
              <img src="../assets/other/logo.png" alt="">
            </div>
            <span>携玩乐销</span>
          </div>
        </div>
      </div>
      <div class="img-container">
        <img src="../assets/other/lxys2.jpg" alt="">
      </div>
      <div class="img-container">
        <img src="../assets/other/hyjl3.png" alt="">
      </div>
      <div class="img-container">
        <img src="../assets/other/dqjl4.jpg" alt="">
      </div>
      <div class="img-container">
        <img src="../assets/other/zs5.jpg" alt="">
      </div>
      <footer>
        <span>———</span>
        我也是有底线的
        <span>———</span>
      </footer>
    </div>
    <!-- tab菜单栏 -->
    <tabbar :selected='selected' :tabs='tabs'></tabbar>
  </div>
</template>
<script>
  import tabbar from '../components/tabbar'
  import { userInfoGet, WXShare } from '../libs/publicMethod.js'
  import { memberByXF } from "../libs/interface"
  export default {
    components: { tabbar, userInfoGet, memberByXF, WXShare },
    data () {
      return {
        selected: 'tab2',
        bgImgHeight: '',
        logoContainerImgHeight: '',
        isShow: userInfoGet().channelLv <= 0 ? true : false,
        registionInfo: {
          tel: '',
          name: '',
        },
        tabs: [
          require('../assets/tabs/sc.png'),
          require('../assets/tabs/zq2.png'),
          require('../assets/tabs/fx.png'),
          require('../assets/tabs/ylc.png'),
          require('../assets/tabs/user.png')
        ],
      }
    },
    methods: {
      agreeAndSubmit () {
        let vm = this
        let params = {
          memberId: userInfoGet().id,
          xFansName: vm.registionInfo.name,
          phone: vm.registionInfo.tel
        }
        memberByXF(params, (data) => {
          if (data.code == 1) {
            vm.isShow = false
            vm.$toast(data.msg)
          } else {
            vm.$toast(data.msg)
          }
        })
      },
    },
    mounted () {
      let vm = this
      document.body.style.paddingBottom = '55px'
      vm.bgImgHeight = document.body.clientWidth * 0.94 + 'px'
      vm.logoContainerImgHeight = vm.$refs.logoContainer.offsetWidth * 0.61 + 'px'
      window.onresize = function windowResize() {
        vm.bgImgHeight = document.body.clientWidth * 0.94 + 'px'
        vm.logoContainerImgHeight = vm.$refs.logoContainer.offsetWidth * 0.61 + 'px'
      }
      
      // 分享
      var Sdata = {                                                          //分享请求配置
        gotoPage:this.$route.path,                                          //邀请者链接         
        inviterID: userInfoGet().id,                                                        //链接带的参数
        type:1,
        desc:'享高端品质，品精致生活，尽在乐销商城！',
        imgUrl:'http://120.77.73.224:80/group1/M00/00/05/eE1J4FoedWqALp8pAABLzkI6gxQ837.png',                                                       //链接图片（小图）     
        shareTitle: '【' + userInfoGet().nick + '】' + '邀请您一起逛乐销商城'               //邀请话
      }
      WXShare.topShare(Sdata)
    }
  }
</script>
<style scoped>
.div-container{
  background-color: #fff;
}
.img-container{
  width: 100%;
  margin-bottom: 1.3%;
}
.img-container img{
  display: block;
  width: 100%;
  height: 100%;
}
.channel-registion{
  background-image: url('../assets/other/makeHead.png');
  background-size: contain;
  margin-bottom: 1.3%;
  width: 100%;
}
.channel-form{
  width: 85%;
  height: 64.5%;
  padding-top: 5%;
  background-clip: content-box;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}
.form-title{
  margin: 5% 0 4.5%;
  font-size: 1.2rem;
  color: #666;
}
.channel-form input{
  width: 83%;
  height: 15%;
  margin: 0 auto 4%;
  display: block;
  border: 1px solid #EDEDED;
  padding-left: 3%;
  font-size: .8rem;
}
.channel-form input::placeholder{
  color: #A9A9A9;
}
.form-btn{
  width: 35%;
  height: 18%;
  background-color: #F06000;
  font-size: .7rem;
  color: #fff;
  margin-left: 7%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-btn span{
  transform: scale(.95,.95)
}
.xiewa-logo{
  width: 20%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  bottom: 5%;
  right: 4%;
}
.logo-container{
  width: 38%;
}
.logo-container img{
  width: 100%;
  height: 100%;
}
.xiewa-logo span{
  margin-top: 3%;
  display: block;
  font-size: .7rem;
  color: #C4C4C4;
  transform: scale(.9,.9)
}
footer{
  margin-top: -1.3%;
  height: 1.8rem;
  color: #C4C4C4;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer span{
  transform: scale(.7,.7)
}
</style>
